/**
 * 组件名称：头像组件
 * 使用场景：右上角头像，页面更人性化，更偏C端
 * 功能介绍：鼠标悬浮/点击头像，弹出菜单，点击不同选项跳转至不同页面
 * 功能进度：30%
 * 待办事项：头像/用户姓氏，跳转链接，绑定退出功能等
 */

"use client";
import {
  Avatar,
  Menu,
  MenuDivider,
  MenuDropdown,
  MenuItem,
  MenuTarget,
  rem,
  UnstyledButton,
} from "@mantine/core";
import {modals} from "@mantine/modals";
import {IconUser, IconLockSearch, IconLogout} from "@tabler/icons-react";

const quitSysConfirm = () => {
  modals.openConfirmModal({
    title: "退出系统",
    children: "退出系统将跳转至融基登录页面，确认退出？",
    labels: {confirm: "确认", cancel: "取消"},
    confirmProps: {color: "red"},
    onCancel: () => console.log("用户点击了取消"),
    onConfirm: () => console.log("用户点击了确认，触发清除JWT命令，并跳转至融基登录页面"),
  });
};

export const IpdAvatar = () => {
  const iconStyle = {width: rem(16), height: rem(16)};
  return (
    <Menu withArrow trigger="click-hover" transitionProps={{transition: "fade", duration: 300}}>
      <MenuTarget>
        <Avatar component={UnstyledButton} alt="cmdi" color="blue" src="/Avatar/man.jpeg" />
      </MenuTarget>
      <MenuDropdown>
        <MenuItem leftSection={<IconUser style={iconStyle} />}>个人信息</MenuItem>
        <MenuItem leftSection={<IconLockSearch style={iconStyle} />}>查看权限</MenuItem>
        <MenuDivider />
        <MenuItem
          color="red"
          leftSection={<IconLogout style={iconStyle} />}
          onClick={quitSysConfirm}
        >
          退出系统
        </MenuItem>
      </MenuDropdown>
    </Menu>
  );
};
